// import React, { useEffect, useState } from 'react';
// import { easing } from 'maath';
// import { useSnapshot } from 'valtio';
// import { useFrame } from '@react-three/fiber';
// import { Decal, useGLTF, useTexture } from '@react-three/drei';

// import state from '../store';
// import { Draggable } from 'gsap/Draggable';

// const Shirt = () => {
//   const snap = useSnapshot(state);
//   const { nodes, materials } = useGLTF('/shirt_baked.glb');

//   const logoTexture = useTexture(snap.logoDecal);
//   const fullTexture = useTexture(snap.fullDecal);

//   const [color, setColor] = useState(snap.color);

//   useFrame((state, delta) => easing.dampC(materials.lambert1.color, color, 0.25, delta));

//   const handleClick = () => {
//     const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
//     setColor(randomColor);
//   };

//   const stateString = JSON.stringify(snap);

//   return (
//     <group key={stateString}>
//       <mesh
//         castShadow
//         geometry={nodes.T_Shirt_male.geometry}
//         material={materials.lambert1}
//         material-roughness={1}
//         dispose={null}
//         className="clothes"
//         onClick={handleClick}
//       >
//         {snap.isFullTexture && (
//           <Decal 
//             position={[0, 0, 0]}
//             rotation={[0, 0, 0]}
//             scale={1}
//             map={fullTexture}
//           />
//         )}

//         {snap.isLogoTexture && (
//           <Decal 
//             position={[0, 0.04, 0.15]}
//             rotation={[0, 0, 0]}
//             scale={0.15}
//             map={logoTexture}
//             anisotropy={16}
//             depthTest={false}
//             depthWrite={true}
//           />
//         )}
//       </mesh>
//     </group>
//   )
// }

// export default Shirt




import React, { useState } from 'react';
import { easing } from 'maath';
import { useSnapshot } from 'valtio';
import { useFrame } from '@react-three/fiber';
import { Decal, useGLTF, useTexture } from '@react-three/drei';
import { useDrag } from '@use-gesture/react';

import state from '../store';

const Shirt = () => {
  const snap = useSnapshot(state);
  const { nodes, materials } = useGLTF('/shirt_baked.glb');

  const logoTexture = useTexture(snap.logoDecal);
  const fullTexture = useTexture(snap.fullDecal);

  const [color, setColor] = useState(snap.color);

  useFrame((state, delta) => easing.dampC(materials.lambert1.color, color, 0.25, delta));

  const handleClick = () => {
    const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    setColor(randomColor);
  };

  const stateString = JSON.stringify(snap);

  const bind = useDrag(({ offset: [x, y] }) => {
    nodes.T_Shirt_male.position.x = x / 100; // 调整比例以适应场景
    nodes.T_Shirt_male.position.y = -y / 100; // 调整比例以适应场景
  });

  return (
    <group key={stateString}>
      <mesh
        castShadow
        geometry={nodes.T_Shirt_male.geometry}
        material={materials.lambert1}
        material-roughness={1}
        dispose={null}
        onClick={handleClick}
        {...bind()}
      >
        {snap.isFullTexture && (
          <Decal 
            position={[0, 0, 0]}
            rotation={[0, 0, 0]}
            scale={1}
            map={fullTexture}
          />
        )}

        {snap.isLogoTexture && (
          <Decal 
            position={[0, 0.04, 0.15]}
            rotation={[0, 0, 0]}
            scale={0.15}
            map={logoTexture}
            anisotropy={16}
            depthTest={false}
            depthWrite={true}
          />
        )}
      </mesh>
    </group>
  )
}

export default Shirt